<template>
  <div class="my-left">

     <van-button class="btn" v-if="user" type="primary" size="normal" block @click="onLogout">退出登录</van-button>
      <van-button class="btn" v-else type="primary" size="normal" block @click="onLogout">未登录</van-button>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'my-left',
  computed: {
    ...mapState(['user'])
  },
  props: {
    isMyLfet: Boolean

  },
  methods: {
    ...mapMutations(['setUser']),
    // 点击退出登录处理事件

    onLogout () {
      // 组件中需要用this.$dialog 来调用
      if (this.user) {
        this.$dialog.confirm({
          title: '确认退出吗？'
        })
          .then(() => {
          // on confirm
            this.isMyLfet = false
            this.$emit('close', false)
            // 确认退出：清除登录状态（容器中的user 和本地存储中的user）
            this.$store.commit('setUser', null)
          })
          .catch(() => {
          // on cancel
            console.log('取消执行')
          })
      } else {
        this.$dialog.confirm({
          title: '请先登录'
        }).then(() => {
          this.isMyLfet = false
          this.$emit('close', false)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.btn{
  background-color: #d7d8cc;
  border: 0;
  color: red;
}
</style>
